import React from 'react'
import { Button, Table, Space, Upload } from 'antd'
import ExportExcel from 'js-export-excel'
import Xlsx from 'xlsx'

// Xlsx.readFileSync()
// console.log(Xlsx)

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: text => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <a>Invite</a>
                <a>Delete</a>
            </Space>
        ),
    },
];

const data = [
    {
        key: '1',
        name: '张三',
        age: 32,
        address: '北京'
    },
    {
        key: '2',
        name: '李四',
        age: 42,
        address: '上海'
    },
    {
        key: '3',
        name: '王五',
        age: 32,
        address: '深圳'
    }
];

// 下载表格的配置项
var option = {};
// 文件的名称
option.fileName = '统计' //文件名
// 文件中的内容
option.datas = [
    {
        //第一个sheet（第一个excel表格）
        sheetData: data,//数据
        sheetName: '人员统计',
        sheetFilter: ['key', 'name', 'age', 'address'],   //表头数据对应的sheetData数据
        sheetHeader: ['id', '姓名', '年龄', '住址'],  //表头数据
        // columnWidths: ['8', '4'], // 列宽
    }
]
// 实例
var toExcel = new ExportExcel(option);

function beforeUpload(file) {
    return new Promise((res, rej) => {
        if (res) analysisFile(file)
    })
}

function analysisFile(file) {
    console.log('开始解析')
    const reader = new FileReader(file)

    reader.onload = (ev) => {
        const text = ev.target.result
        const excelObj = Xlsx.read(text, { type: 'binary' })  // 这里使用type为binary

        // 表头
        let exceName = excelObj.SheetNames[0]
        // 根据表头获取内容
        let excelArr = excelObj.Sheets[exceName]
        let arr = Xlsx.utils.sheet_to_json(excelArr)
        console.log(arr)
    }
    // 为了执行onload
    reader.readAsBinaryString(file)
    console.log(reader)
}


function Crud() {
    return (
        <div>
            {/* action上传文件的地址 */}
            {/* 选取后缀名 */}
            <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                accept=".xlsx"
                beforeUpload={beforeUpload}>
                <Button>导入</Button>
            </Upload>

            <Button onClick={() => {
                toExcel.saveExcel()
            }}>导出</Button>
            <Table columns={columns} dataSource={data} />
        </div>
    )
}

export default Crud
